<template>
  <view class="content">
    <scroll-view scroll-y class="left-aside">
      <view v-for="item in categories" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
        {{item.name}}
      </view>
    </scroll-view>
    <scroll-view scroll-with-animation scroll-y class="right-aside" :scroll-top="tabScrollTop">
      <view v-if="slist.length!==0" v-for="item in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
        <text class="s-item">{{item.name}}</text>
        <view class="t-list">
          <view @click="handleToInfo(titem.id)" v-if="titem.parentId === item.id" class="t-item" v-for="titem in item.children" :key="titem.id">
            <image :src="titem.imagesPath"></image>
            <text>{{titem.name}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  listAll
} from '@/api/product/categories'



export default {
  data() {
    return {
      sizeCalcState: false,
      tabScrollTop: 0,
      currentId: 0,
      slist: [],
      categories: [],
      showIndex: 0,
      id: ""

    };
  },
  methods: {
    //一级分类点击
    tabtap(item){
      this.currentId = item.id;
      this.slist = []
      if (item.children !== undefined) {
        item.children.forEach((o)=>{
          this.slist.push(o)
        })
      }
    },


    handleToInfo(query) {
      this.$tab.navigateTo('/pages/product/prodList/index?query=' + query)
    },

    handleTree(data, id, parentId, children) {
      let config = {
        id: id || 'id',
        parentId: parentId || 'parentId',
        childrenList: children || 'children'
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];

      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }

      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }

      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }

      return tree;
    }
  },
  async onLoad() {

    let out = await listAll({});

    this.categories = this.handleTree(out.data, "id", "parentId");
    this.currentId = this.categories[0].id;
    let first = this.categories[0]
    first.children.forEach((o)=>{
      this.slist.push(o)
    })
  }
};
</script>

<style lang="scss">

.content {
  height: 100%;
  background-color: #f8f8f8;
}

.content {
  display: flex;
}
.left-aside {
  flex-shrink: 0;
  width: 200upx;
  height: 100%;
  background-color: #fff;
}
.f-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100upx;
  font-size: 28upx;
  color: $font-color-base;
  position: relative;
  &.active{
    color: $base-color;
    background: #f8f8f8;

    &:before{
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 36upx;
      width: 8upx;
      background-color: $base-color;
      border-radius: 0 4px 4px 0;
      opacity: .8;
    }
  }
}

.right-aside{
  flex: 1;
  overflow: hidden;
  padding-left: 20upx;
}
.s-item{
  display: flex;
  align-items: center;
  height: 70upx;
  padding-top: 8upx;
  font-size: 28upx;
  color: $font-color-dark;
}
.t-list{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: #fff;
  padding-top: 12upx;
  &:after{
    content: '';
    flex: 99;
    height: 0;
  }
}
.t-item{
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 176upx;
  font-size: 26upx;
  color: #666;
  padding-bottom: 20upx;

  image{
    width: 140upx;
    height: 140upx;
  }
}
</style>